<template>
  <div>
    <div class="heaher">
      <div class="header-input">
        <input v-model="searchData" class="input-content" type="text" placeholder="输入城市/景点/游玩主题">
      </div>
    </div>
    <div class="header-search" v-show="searchData" ref="searchScroll">
      <ul>
        <li v-for="item in list" :key="item.id" class="header-search-item border-bottom">{{item}}</li>
        <li v-show="handDataNo"  class="header-search-item border-bottom">您搜索的城市暂无</li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'CitySearch',
  props: {
    cities: Object
  },
  data () {
    return {
      searchData : '',
      timer: null ,
      list: []
    }
  },
  computed: {
    handDataNo () {
      return !this.list.length
    }
  },
  mounted () {
    this.BScroll = new BScroll(this.$refs.searchScroll)
  },
  watch: {
    searchData () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        const  result = []
        for (let i in this.cities) {
          this.cities[i].forEach((value) => {
            if (value.spell.indexOf(this.searchData) > -1 || value.name.indexOf(this.searchData) > -1) {
              result.push(value.name)
            }
          })
        }
        this.list = result
      }, 100)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  .heaher
    display: flex
    line-height: .86rem
    background: $bgColor
    color #fff
    .header-input
      flex: 1
      height: .64rem
      line-height: .64rem
      width 80%
      line-height: .64rem
      margin-top: .12rem
      background: #fff
      margin-right: .2rem
      margin-left .2rem
      border-radius: .1rem
      color: #ccc
      text-align center
      margin-bottom .1rem
      .input-content
        box-sizing border-box
        color #c4c4c4
        width 100%
        text-align center
        padding 0 .2rem
  .header-search
    z-index 1
    overflow hidden
    position absolute
    top 1.65rem
    left 0
    right 0
    bottom 0
    background #c4c4c4
    .header-search-item
     background white
     line-height .62rem
     text-indent .5rem
     font-size .3rem
     color #666

</style>
